{% extends "base.html" %}
{% load i18n %}
{% block head %}
	<title>{%trans "校园帮帮团" %}</title>
	{{ block.super }}
{% endblock %}

{% block content %}
    <div class="page-content" style="min-width:80%;">
        <ol class="breadcrumb detail-breadcrumb">
            <li class="all pro-all"><span href="#index?catalogue=all&amp;tag=all">我的任务</span></li>
            <li><span href="#index/list?catalogue=导航&amp;tag=all">已接单任务</span></li>
        </ol>
        <div class="bk-collapse-panel">
            <div class="panel-header" role="tab">
                <a role="button" data-toggle="collapse" href="#panel-content2" class="panel-icon panel-spread"
                   aria-expanded="true"></a>
                <h3 role="button" data-toggle="collapse" href="#panel-content2" class="panel-title"
                    aria-expanded="true">跑腿任务</h3>
            </div>
            <div id="panel-content2" class="panel-body panel-collapse p0 collapse in" aria-expanded="true" style="">
                <table id="my_offline_mission" class="bk-table bk-table-header-bordered">
                    <thead>
                    <tr>
                        <th>发布人</th>
                        <th>发布日期</th>
                        <th>分类</th>
                        <th>详情</th>
                        <th>截止日期</th>
                        <th>任务状态</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
        <div class="bk-collapse-panel">
            <div class="panel-header" role="tab">
                <a role="button" data-toggle="collapse" href="#panel-content2" class="panel-icon panel-spread"
                   aria-expanded="true"></a>
                <h3 role="button" data-toggle="collapse" href="#panel-content2" class="panel-title"
                    aria-expanded="true">线上任务</h3>
            </div>
            <div id="panel-content2" class="panel-body panel-collapse p0 collapse in" aria-expanded="true" style="">
                <table id="my_online_mission" class="bk-table bk-table-header-bordered">
                    <thead>
                    <tr>
                        <th>发布人</th>
                        <th>发布日期</th>
                        <th>任务类型</th>
                        <th>任务详情</th>
                        <th>任务备注</th>
                        <th>任务酬劳</th>
                        <th>截止日期</th>
                        <th>任务状态</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade" id="finishMissionModal" tabindex="1" role="dialog"
         aria-labelledby="editApplyModalLabel"
         data-backdrop="static">
        <div class="modal-dialog" style="width: 500px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="finishMissionModal">任务提交</h4>
                </div>
                <div class="row">
                    <div class="col-lg-6">
                        <form id="validate_form">
                            {% csrf_token %}
                            <div class="bk-form" style="padding: 10px 28px 10px 0" id="validate_form">
                                <input type="hidden" id="mission_id" class="bk-form-input">
                                <div class="bk-form-item is-required">
                                    <label class="bk-label" style="width:150px;">完成情况</label>
                                    <div class="bk-form-content" style="margin-left:150px;width: 250px;">
                                        <textarea class="bk-form-textarea ignore" id="remark" name="remark" placeholder="在此输入该任务完成情况以及备注"></textarea>
                                    </div>
                                </div>
                                <div class="bk-form-item">
                                    <div class="bk-form-item">
                                        <label class="bk-label" style="width:150px;">上传附件</label>
                                        <div class="bk-form-content" style="margin-left:150px;">
                                            <input type="file" id="fileData">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="bk-button bk-default" data-dismiss="modal">关闭</button>
                    <button type="submit" id="finishMission" onclick="finishMission()" class="bk-button bk-primary">提交</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <div class="modal fade" id="getAcceptMissionModal" tabindex="1" role="dialog"
         aria-labelledby="getAcceptMissionModal"
         data-backdrop="static">
        <div class="modal-dialog" style="width: 500px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="displayEditApplyModalLabel">订单信息</h4>
                </div>
                <div class="row">
                    <div class="col-lg-6">
                        <form id="validate_form">
                            <div class="bk-form" style="padding: 10px 28px 10px 0" id="validate_form">
                                <div class="bk-form-item">
                                    <label class="bk-label" style="width:150px;">完成情况</label>
                                    <div class="bk-form-content" style="margin-left:150px;">
                                        <p class="p_class" id="display_remark"></p>
                                    </div>
                                </div>
                                <div class="bk-form-item">
                                    <label class="bk-label" style="width:150px;">附件</label>
                                    <div class="bk-form-content" style="margin-left:150px;">
                                        <a href="" target="_blank" id="attachment_url">
                                            <span class="bk-tag is-fill bk-primary">点击查看附件</span></a>
                                    </div>
                                </div>
                                <div class="bk-form-item">
                                    <label class="bk-label" style="width:150px;">评价</label>
                                    <div class="bk-form-content" style="margin-left:150px;">
                                        <p class="p_class" id="comment"></p>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="bk-button bk-default" data-dismiss="modal">关闭</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <div class="modal fade" id="getBelongUserInfo" tabindex="1" role="dialog"
         aria-labelledby="getBelongUserInfo"
         data-backdrop="static">
        <div class="modal-dialog" style="width: 500px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="displayEditApplyModalLabel">订单信息</h4>
                </div>
                <div class="row">
                    <div class="col-lg-6">
                        <form id="validate_form">
                            <div class="bk-form" style="padding: 10px 28px 10px 0" id="validate_form">
                                <div class="bk-form-item">
                                    <label class="bk-label" style="width:150px;">联系人</label>
                                    <div class="bk-form-content" style="margin-left:150px;">
                                        <p class="p_class" id="belonging_user"></p>
                                    </div>
                                </div>
                                <div class="bk-form-item">
                                    <label class="bk-label" style="width:150px;">联系电话</label>
                                    <div class="bk-form-content" style="margin-left:150px;">
                                        <p class="p_class" id="user_phone"></p>
                                    </div>
                                </div>
                                <div class="bk-form-item">
                                    <label class="bk-label" style="width:150px;">用户备注</label>
                                    <div class="bk-form-content" style="margin-left:150px;">
                                        <p class="p_class" id="user_remarks"></p>
                                    </div>
                                </div>
                                <div class="bk-form-item">
                                    <label class="bk-label" style="width:150px;">任务信息</label>
                                    <div class="bk-form-content" style="margin-left:150px; width: 300px">
                                        <p class="p_class" id="mission_remarks"></p>
                                    </div>
                                </div>
                                <div class="bk-form-item">
                                    <label class="bk-label" style="width:150px;">任务酬劳</label>
                                    <div class="bk-form-content" style="margin-left:150px;">
                                        <p class="p_class" id="mission_salary"></p>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="bk-button bk-default" data-dismiss="modal">关闭</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
{% endblock %}

{% block extra_block %}
<script>
   var language = {
            search: "{% trans '搜索：' %}",
            lengthMenu: "{% trans '每页显示 _MENU_ 记录' %}",
            zeroRecords: "{% trans '没找到相应的数据！' %}",
            info: "{% trans '分页 _PAGE_ / _PAGES_ 共 _TOTAL_ 条' %}",
            infoEmpty: "{% trans '暂无数据！' %}",
            infoFiltered: "{% trans '(从 _MAX_ 条数据中搜索)' %}",
            paginate: {
                first: "{% trans '首页' %}",
                last: "{% trans '尾页' %}",
                previous: "{% trans '上一页' %}",
                next: "{% trans '下一页' %}",
            }
        }

   var myAcceptMission = $('#my_offline_mission').DataTable({
        sProcessing: '<img alt="loadding" src="https://magicbox.bk.tencent.com/static_api/v3/components/loading1/images/loading_2_36x36.gif">',
        //这里很重要，如果你的加载中是文字，则直接写上文字即可，如果是gif的图片，使用img标签就可以加载
        pagingType: "full_numbers",
        paging: true, //隐藏分页
        ordering: false, //关闭排序
        info: true, //隐藏左下角分页信息
        searching: false, //关闭搜索
        pageLength: 10, //每页显示几条数据
        lengthChange: false, //不允许用户改变表格每页显示的记录数
        language: language, //汉化
        serverSide: true,
        lengthMenu: [5, 10, 25, 50, 75, 100],
        ajax: {
            url: '{{SITE_URL}}my_offline_mission_list/',
            method: "get",
            dataType: 'json',
            dataSrc: function (json) {
                json.draw = json.data.info.draw;
                json.recordsTotal = json.data.info.recordsTotal;
                json.recordsFiltered = json.data.info.recordsFiltered;
                json.data = json.data.info.data

                return json.data;
            },
        },
        columnDefs: [
            {
                targets: 0,
                data: "belonging_user", className: "text-center",
            },
            {
                targets: 1,
                data: "create_time", className: "text-center",
            },
            {
                targets: 2,
                data: "mission_type", className: "text-center",
                render: function (data, type, row, meta) {
                    return '<span class="bk-tag bk-primary">' + data + '</span>';
                }
            },
            {
                targets: 3,
                data: "mission_require", className: "text-center",
            },
            {#{#}
            {#    targets: 4,#}
            {#    data: "mission_remarks", className: "text-center",#}
            {#{#}
            {#    targets: 5,#}
            {#    data: "mission_salary", className: "text-center",#}
            {
                targets: 4,
                data: "effect_time", className: "text-center",
            },
            {
                targets: 5,
                data: "mission_status", className: "text-center",
                render: function (data, type, row, meta) {
                    if (data === "已过期") {
                        return '<span class="bk-tag is-fill bk-light-gray">' + data + '</span>';
                    } else if (data === "已完成") {
                        return '<span class="bk-tag bk-primary">' + data + '</span>';
                    } else if (data === "已接单") {
                        return '<span class="bk-tag is-fill bk-primary">' + data + '</span>';
                    } else if (data === "待审核") {
                        return '<span class="bk-tag is-fill bk-light-gray">' + data + '</span>';
                    } else if (data === "生效中") {
                        return '<span class="bk-tag is-fill bk-success">' + data + '</span>';
                    } else if (data === "已取消") {
                        return '<span class="bk-tag is-fill bk-gray">' + data + '</span>';
                    }else {
                        return '<span class="bk-tag is-fill bk-success">None</span>';
                    }
                }
            },
            {
                targets: 6,
                data: "id", className: "text-center",
                render: function (data, type, row, meta) {
                    if (row.mission_status === "已接单") {
                        return '<div class="king-btn-demo king-btn-group">' +
                        '<a class="king-btn king-info king-btn-small" type="button" onclick="getMission(' + data + ')" data-toggle="modal" data-target="#finishMissionModal" title="完成任务">\n' +
                        '<i class="fa fa-cog btn-icon">提交</i>\n' +
                        '</a>\n' +
                        '<a class="king-btn king-info king-btn-small" type="button" onclick="getBelongUserInfo(' + row.mission_id + ')" data-toggle="modal" data-target="#getBelongUserInfo" title="完成任务">\n' +
                        '<i class="fa fa-mail-reply-all btn-icon">查看</i>\n' +
                        '</a>\n' +
                        '<a class="king-btn king-info king-btn-small" type="button" onclick="cancelMission(' + data + ')" title="">\n' +
                        '<i class="fa fa-close btn-icon">取消</i>\n' +
                        '</a>\n</div>';
                    } else if (row.mission_status === "待审核") {
                        return '<div class="king-btn-demo king-btn-group">' +
                            '<a class="king-btn king-info king-btn-small" type="button" onclick="getMission(' + data + ')" data-toggle="modal" data-target="#finishMissionModal" title="完成任务">\n' +
                            '<i class="fa fa-cog btn-icon">重新提交</i>\n' +
                            '</a>\n</div>';
                    } else if (row.mission_status === "已完成") {
                        return '<div class="king-btn-demo king-btn-group">' +
                            '<a class="king-btn king-info king-btn-small" type="button" onclick="getComment(' + row.mission_id + ')" data-toggle="modal" data-target="#getAcceptMissionModal" title="查看订单">\n' +
                            '<i class="fa fa-cog btn-icon">查看订单</i>\n' +
                            '</a>\n</div>';
                    } else {
                        return '---';
                    }


                }
            },
        ]
    });

   setInterval(function () {
       myAcceptMission.ajax.reload(null, false); // user paging is not reset on reload
   }, 30000);

   function cancelMission(id) {
        var dialog = new bkDialog({
            type: 'dialog',
            title: '取消',
            content: '确认取消该订单？',
            confirmFn: function () {
                $.ajax({
                    url: '{{ SITE_URL }}cancel_mission/' + id,
                    method: 'get',
                    success: function (response) {
                        if (response['result']) {
                            new bkMessage({
                                message: response['message'],
                                theme: 'success'
                            })
                            myAcceptMission.ajax.reload(null, false)
                        } else {
                            // 失败处理
                            new bkMessage({
                                message: response['message'],
                                theme: 'error',
                                delay: 3000
                            });
                        }
                    }
                })
            }
        });
        dialog.show();
    }

   function getMission(id) {
       $("#mission_id").val(id);
   }
   function finishMission() {
       if ($('#validate_form').valid()) {
           var mission_id = $("#mission_id").val();
           var remark = $("#remark").val();
           var file = $("#fileData")[0].files[0];
           var formdata = new FormData();

           formdata.append('mission_id', mission_id);
           formdata.append('remark', remark);
           formdata.append('file', file);

           $.ajax({
               url: '{{ SITE_URL }}finish_mission/',
               method: 'post',
               data: formdata,
               processData: false, // 不处理数据( 必须有)
               contentType: false, //不设置内容类型 ( 必须要)
               header: {
                   'X-CSRFToken': "{{ csrf_token }}",
               },
               success: function (response) {
                   if (response['result']) {
                       new bkMessage({
                           message: response['message'],
                           theme: 'success'
                       })
                       $('#finishMissionModal').modal('hide')
                       myAcceptMission.ajax.reload(null, false)
                   } else {
                       // 失败处理
                       new bkMessage({
                           message: response['message'],
                           theme: 'error',
                           delay: 3000
                       });
                   }
               }
           })
       }
   }

   function getComment(id) {
       $.ajax({
        url: '{{ SITE_URL }}get_accept_mission/' + id,
        method: 'get',
        success: function (response) {
            if (response['result']) {
                $("#display_remark").html(response.data.info.data.remark);
                $("#attachment_url").attr('href', "{{ SITE_URL }}" + response.data.info.data.attachment_url);
                $("#comment").html(response.data.info.data.comment);
            } else {
                // 失败处理
                new bkMessage({
                    message: response['message'],
                    theme: 'error',
                    delay: 3000
                });
            }
        }
        })
   }

   function getBelongUserInfo(id) {
        $.ajax({
        url: '{{ SITE_URL }}get_belong_user_info/' + id,
        method: 'get',
        success: function (response) {
            if (response['result']) {
                $("#belonging_user").html(response.data.info.data.belonging_user);
                $("#user_remarks").html(response.data.info.data.user_remarks);
                $("#user_phone").html(response.data.info.data.user_phone);
                $("#mission_remarks").html(response.data.info.data.mission_remarks);
                $("#mission_salary").html(response.data.info.data.mission_salary);
            } else {
                // 失败处理
                new bkMessage({
                    message: response['message'],
                    theme: 'error',
                    delay: 3000
                });
            }
        }
        })
   }
</script>
{% endblock %}

